import React,{useState,useEffect} from 'react';
import Editor from 'wangEditor';

export default function EditorDemo(){
    const [htmlData,setHtmlData] = useState("");

    useEffect(()=>{
        // editor初始化
        const editorDom = document.getElementById("editorDom");
        const editor = new Editor(editorDom);
        editor.config.onchange = html => {
            setHtmlData(html);
            const showHtml = document.getElementById("html");
            showHtml.innerHTML = html;
            console.log(html);
        };

        // 可以直接上传本地图片，图片内容会被转换为base64，如果不配置，只能填写网络图片的url
        editor.config.uploadImgShowBase64 = true;

        // 隐藏网络图片url插入选项
        editor.config.showLinkImg = false;

        // 创建editor
        editor.create();
        return () => {
            // 组件销毁时销毁编辑器  注：class写法需要在componentWillUnmount中调用
            editor.destroy()
        }
    },[]);


    return (<>
        <div id={"editorDom"}/>
        <h1 style={{textAlign:'center'}}>结果展示区</h1>
        <div id={"html"}/>
    </>)
}